<template>
	<view class="login_bg">
		<view class="like_top">
			<view class="back">
				<view class="back_img" @click="edit_ziliao()"><image src="../../static/images/left.png" mode="widthFix"></image></view>
			</view>
			<view class="sub" @click="edit_ziliao()"><image src="../../static/images/icon_edit-9e97b562.png" mode="widthFix"></image></view>
		</view>
		
		<view class="yulan_banner">
			<view class="peopleSwiper">
			  <swiper class="bigImg" :current="current">
			    <swiper-item v-for="(big,index) in imgSwiperData" :key="index">
			      <image :src="big.imgUrl" mode="scaleToFill"></image>
			    </swiper-item>
			  </swiper>
			  <view class="name">小骚货</view>
			  <scroll-view class="smallImg" scroll-x="true">
			    <view v-for="(small,index) in imgSwiperData1" :key="index" @click="changeBigPic(index)" class="smallItemm">
			      <image :src="small.imgUrl" mode="widthFix" class="smallItem" :class="[index == current ? 'active' : '']"></image>
			    </view>
			  </scroll-view>
			</view>
		</view>
		<view class="yulan_xinxi">
			<view class="yulan_xinxi_about">
				<view class="about"><image src="../../static/images/icon_about-a5b7c014.png" mode="widthFix"></image></view>
				<view class="about_txt">关于我</view>
			</view>
			<view class="jianjie_message">
				<view><text class="jianjie_message_left">ID:</text><text class="jianjie_message_right">84049515</text></view>
				<view><text class="jianjie_message_left">年龄:</text><text class="jianjie_message_right">30岁</text></view>
				<view><text class="jianjie_message_left">身高:</text><text class="jianjie_message_right">180cm</text></view>
				<view><text class="jianjie_message_left">体重:</text><text class="jianjie_message_right">70kg</text></view>
				<view><text class="jianjie_message_left">常驻:</text><text class="jianjie_message_right">苏州</text></view>
				<view><text class="jianjie_message_left">简介:</text><text class="jianjie_message_right">小骚货小骚货小骚货小骚货小骚货</text></view>
			</view>
		</view>
		<view class="yulan_xinxi">
			<view class="yulan_dongtai">动态</view>
			<view class="empty">
				<view class="emptyy"><image src="../../static/images/empty-ae71f5fc.png" mode="widthFix"></image></view>
				<text class="empty_txt"></text>
			</view>
		</view>
		
		
		
		
		
		
		
	</view>
</template>

<script>
	export default {
	  data() {
	    return {
	      current: 0,//轮播图索引
	      imgSwiperData:[
					{id:0,imgUrl:"http://wp.huaxijiance.com/1.png"},                
					{id:1,imgUrl:"http://wp.huaxijiance.com/1.png"},        
					{id:2,imgUrl:"http://wp.huaxijiance.com/1.png"},        
					{id:3,imgUrl:"http://wp.huaxijiance.com/1.png"},
					{id:4,imgUrl:"http://wp.huaxijiance.com/1.png"},
	      ],
		  imgSwiperData1:[
		  			{id:0,imgUrl:"http://wp.huaxijiance.com/w270_h270_qm.png"},                
		  			{id:1,imgUrl:"http://wp.huaxijiance.com/w270_h270_qm.png"},        
		  			{id:2,imgUrl:"http://wp.huaxijiance.com/w270_h270_qm.png"},        
		  			{id:3,imgUrl:"http://wp.huaxijiance.com/w270_h270_qm.png"},
		  			{id:4,imgUrl:"http://wp.huaxijiance.com/w270_h270_qm.png"},
		  ],
	    }
	  },
	  methods:{
		  edit_ziliao(){
			  uni.navigateTo({
			  	url:'/pages/edit_ziliao/edit_ziliao'
			  })
		  },
	    //点击小图切换指定大图
	    changeBigPic(index){
	      this.current = index;
	    },
	  }
	}

</script>

<style>
  @import "../../static/css/yulan_personal.css";
</style>
